<script setup>
    import { ElMessage } from 'element-plus';
    import { ref } from 'vue';

    const name = ref("");
    const password = ref("");
    const confirmPassword = ref("");
    const age = ref(0);
    const gender = ref("");
    const hobby = ref([]);
    const job = ref("");
    const info = ref("");
    const dialogVisible = ref(false);
    const isNameFocused = ref(false);
    const isPasswordFocused = ref(false);
    const isConfirmPasswordFocused = ref(false);
    const isAgeFocused = ref(false);

    const onSubmit = () => {
        dialogVisible.value = true;
    };

    const validateName = () => {
        if (name.value.length < 4) {
            ElMessage.error('用户名长度不能少于4个字符');
            name.value = '';
        }
    };

    const validatePassword = () => {
        if (password.value.length < 6) {
            ElMessage.error('密码长度不能少于6个字符');
            password.value = '';
        }
    };

    const validateConfirmPassword = () => {
        if (confirmPassword.value!== password.value) {
            ElMessage.error('两次输入的密码不一致');
            confirmPassword.value = '';
        }
    };

    const validateAge = () => {
        if (age.value < 0) {
            ElMessage.error("年龄不能为负数！");
            age.value = 0;
        }
    };
</script>
<template>
    <el-container>

        <el-main class="main">
            <el-form label-width="auto" style="max-width: 600px;margin: 80px auto;">
                <el-form-item label="用户名">
                    <el-input v-model="name" @blur="validateName"/>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="password" type="password" @blur="validatePassword"/>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input v-model="confirmPassword" type="password" @blur="validateConfirmPassword"/>
                    </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="age" type="number" @blur="validateAge"/> 
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="gender">
                        <el-radio value="男">男</el-radio>
                        <el-radio value="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="兴趣爱好">
                    <el-checkbox-group v-model="hobby">
                        <el-checkbox value="阅读" name="type">阅读</el-checkbox>
                        <el-checkbox value="运动" name="type">运动</el-checkbox>
                        <el-checkbox value="旅行" name="type">旅行</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="职业">
                    <el-select v-model="job" placeholder="please select your zone">
                        <el-option value="前端开发工程师">前端开发工程师</el-option>
                        <el-option value="后端开发工程师">后端开发工程师</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="自我介绍">
                    <el-input v-model="info" type="textarea"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>

            </el-form>
        </el-main>
            
    </el-container>

    <el-dialog v-model="dialogVisible" title="请确认注册信息" width="500">
        <div style="display: flex;flex-direction: column;">
            <span>用户名：{{name}}</span>
            <span>年龄：{{age}}</span>
            <span>性别：{{gender}}</span>
            <span>兴趣爱好：{{hobby}}</span>
            <span>职业：{{job}}</span>
            <span>自我介绍：{{info}}</span>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style scoped> 
    .main{
            width: 1200px;
            margin: 0 auto;
            min-height: calc(100vh - 180px);                        
        }
        a{text-decoration: none;}
</style>

